<script setup>
import Tag from '@/components/tag/index.vue'

const props = defineProps({
  level: {
    type: String,
    default: 'warn', // second-次要预警 general-一般预警 warn-重要预警
  },
  warnMessage: String
})

const warnText = computed(() => ({
  warn: '重要预警',
  second: '次要预警',
  general: '一般预警'
}[props.level]))

const warnPanelHeaderClass = computed(() => [`warn-panel-header__${props.level}`])
</script>

<template>
  <view class="warn-panel-container">
    <view class="warn-panel-header-container" :class="warnPanelHeaderClass">
      <tag class="tag" size="small" :type="props.level">{{ warnText }}</tag>
      <tag class="tag" size="small">{{ props.warnMessage }}</tag>
    </view>
    <view class="warn-panel-content-container"><slot></slot></view>
    <view class="warn-panel-footer-container"><slot name="footer"></slot></view>
    <view class="warn-panel-footer-default-container mlr32">
      <view class="baker-home-detail flex-1 fl">查看烤房详情</view>
      <view class="tobacco-farmer-info flex-1 fr">查看烟农信息</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.warn-panel-container {
  border-radius: 32rpx;
  background-color: $kaoyan-color-14;
  overflow: hidden;
}
.warn-panel-header-container {
  padding: 12rpx 32rpx;
  .tag {
    display: inline-block;
    &:not(:last-child) {
      margin-right: 16rpx;
    }
  }
}
.warn-panel-header__warn {
  background-color: #FFE7E6;
}
.warn-panel-header__second {
  background-color: #FFEFD6;
}
.warn-panel-header__general {
  background-color: $kaoyan-color-12;
}
.warn-panel-footer-container:empty + .warn-panel-footer-default-container {
  display: flex;
}
.warn-panel-footer-default-container {
  border-top: 2rpx solid $kaoyan-color-12;
  display: none;
  flex-direction: row;
  align-items: center;
  .baker-home-detail,
  .tobacco-farmer-info {
    padding: 28rpx 0;
    @include fs36w600;
  }
}
</style>
